<template>
    <div class="local-life-store">
        <c-title :text="info.name"></c-title>

        <div style="position: relative;" :class="{ 'pt': photo_list && photo_list.length == 0 }">
            <div class="head" v-if="photo_list && photo_list.length !== 0">
                <div v-for="(item, index) in photo_list" class='head-item'>
                    <img :src="item" alt="" @click="show_preview(index)" />
                </div>
            </div>

            <span @click="goto('photo-album')" class='img-count'>
                <i class="iconfont icon-tupian"></i>{{ total_pics }}</span>
        </div>
        <div class="main" v-if="info">
            <div class="main-name">{{ info.name }}</div>
            <div class="main-per-capita">{{ $i18n.t('money') }}{{ info.avg_consum }}/人</div>
            <div class="main-time">
                <div class="main-time-left">营业时间：
                    <span v-for="item in info.open_time">
                        <template v-for="(c_item, i) in item.weeks">{{ c_item }}<template
                                v-if="i + 1 !== item.weeks.length">、</template></template>&nbsp;
                        <template v-for="(c_item, c_index) in item.times">{{ format(c_item.start_time, c_item.end_time)
                            }}<template v-if="c_index + 1 !== item.times.length">、</template></template>
                    </span>
                </div>
                <div class="main-time-right" @click="goto('detail')">详情<i style="color:#999999;"
                        class="iconfont icon-icon_more11"></i>
                </div>
            </div>
            <div class="main-address-wrapper">
                <div class="main-address-left">
                    <div class="main-address">{{ info.address_detail }}</div>
                    <div class="main-distance" v-if="info.distance">
                        <i class="iconfont icon-dizhi1"></i>
                        <span class="main-distance-tips">距离{{ info.distance }}</span>
                    </div>
                </div>
                <div class="main-address-right">
                    <div style="margin-right: 1.1563rem;" class="main-address-right-icon" @click.stop="navigation()">
                        <span class="iconfont icon-zx_map_local"></span>
                        <span>地图</span>
                    </div>
                    <div class="main-address-right-icon" @click.stop="callStore()">
                        <span class="iconfont icon-zx_map_tel"></span>
                        <span>电话</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="group-purchase">
            <div class="group-purchase-title">优惠团购</div>
            <store_goods class="store-goods" :list="list">
            </store_goods>
            <div class="view-all" @click="goto('all')">查看全部<i class="iconfont icon-icon_more11"></i></div>
        </div>
        <div class="group-purchase" v-if="comment_list && comment_list.length !== 0">
            <div class="group-purchase-user">
                <div class="group-purchase-title" style="margin-bottom: 0;">用户评价 </div>
                <div class="view-all" style="margin-top:0;" @click="goto('comment')">查看全部<i
                        class="iconfont icon-icon_more11"></i></div>
            </div>
            <div class="content" v-for="item in comment_list" :key="item.id">
                <div class="content-head">
                    <div class="flex-center">
                        <img :src="item.has_one_member.avatar" alt="">
                        <div>
                            <div class="nick-name">{{ item.has_one_member.nickname }}</div>
                            <div class="flex-center">
                                <i v-for="score_item in 5"
                                    :class="score_item <= item.rank ? 'iconfont  icon-fontclass-pingfen current' : 'iconfont  icon-fontclass-pingfen'"></i>
                            </div>
                        </div>
                    </div>
                    <div class="time">{{ item.created_at }}</div>
                </div>
                <div style="margin-left: 2.5313rem;">
                    <div class="content-txt">
                        {{ item.comment }}
                    </div>
                    <div class="pic">
                        <img v-for="c_item in item.pic" :src="c_item" alt="" />
                    </div>
                </div>

            </div>

        </div>
        <div class="group-purchase">
            <div class="group-purchase-title">猜你喜欢</div>
            <template v-if="goods_list && goods_list.length !== 0">
                <div class="like-store" v-for="(item, i) in goods_list" :key="i" @click="goto_goods(item)">
                    <img :src="item.has_one_brand.logo" alt="" />
                    <div class="like-store-right">
                        <div>
                            <div class="like-store-name">{{ item.name }}</div>
                            <div class="store-distance">{{ item.distance }}</div>
                        </div>
                        <div class="like-store-bottom">
                            <span class="discounts">惠</span>
                            <div class="like-price"><span style="font-size: .75rem;">{{ $i18n.t('money') }}</span>{{
                                item.has_many_goods_relation.length!==0&&item.has_many_goods_relation[0].has_one_goods.price }}
                            </div>
                            <div class="like-goods-name">{{ item.has_many_goods_relation.length!==0&&item.has_many_goods_relation[0].has_one_goods.title }}</div>
                        </div>
                    </div>
                </div>
            </template>

        </div>

        <div class="footer" :class="{ 'pc-style': fun.isPc() }">
            <div class="footer-icon" @click="goto('home')">
                <i class="iconfont icon-shouye"></i>
                <span class="footer-tips">首页</span>
            </div>
            <div class="footer-icon footer-order-icon" @click="goto('order')">
                <i class="iconfont icon-icon_dingdan_11"></i>
                <span class="footer-tips">订单</span>
            </div>
            <div class="footer-btn evaluate" @click="goto">去评价</div>
            <div class="footer-btn all" @click="goto('all')">全部团购</div>

        </div>
    </div>
</template>

<script>
import store_goods from "../components/store_goods.vue";
import { scrollMixin } from "../../../utils/mixin";
import { ImagePreview } from 'vant';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            photo_listt: [],
            total_pics: 0,
            list: [],
            info: {},
            comment_list: [],
            goods_list: [], page: 1,
            total_page: 1,
            isLoadMore: true,
            point: { lng: "", lat: "" },
        };
    },
    activated() {
        let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
        if (myLoaction) {
            this.point.lat = myLoaction.point.lat;
            this.point.lng = myLoaction.point.lng;
        }
        this.isLoadMore = true;
        this.getGoods();
        this.getDetail();
        this.getComment();
        this.get_like_goods()
    },
    methods: {
        show_preview(startPosition) {
            ImagePreview({ images: this.photo_list, startPosition });
        },
        goto_goods(data) {
            let goods_id = data?.has_many_goods_relation[0]?.goods_id;
            this.$router.push(this.fun.getUrl("local_life_goods", { goods_id}))
        },
        format(start_time, end_time) {
            let start_date = new Date(start_time * 1)
            let end_date = new Date(end_time * 1)
            var start_hour = start_date.getHours() < 10 ? `0${start_date.getHours()}` : start_date.getHours();
            var start_minute = start_date.getMinutes() < 10 ? `0${start_date.getMinutes()}` : start_date.getMinutes();
            var end_hour = end_date.getHours() < 10 ? `0${end_date.getHours()}` : end_date.getHours();
            var end_minute = end_date.getMinutes() < 10 ? `0${end_date.getMinutes()}` : end_date.getMinutes();
            return `${start_hour}:${start_minute}～${end_hour}:${end_minute}`;
        },
        async get_like_goods(page = 1) {
            let longitude = this.point.lng, latitude = this.point.lat;
            if (!this.point.lng) {
                this.fun
                    .getLocation()
                    .then((res) => {
                        longitude = res.point.lng;
                        latitude = res.point.lat;
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }

            // let local_life_code = localStorage.getItem('local_life_code');
            // if (local_life_code) {
            //     let city_id = local_life_code + '';
            //     let _city = city_id.slice(0, -2) + '00';//市的city_id
            //     json.city_id = _city
            // }
            let _json = {
                page,
                longitude, latitude
            }
            let { result, msg, data } = await $http.post("plugin.local-life.api.store.nearest-store", _json, '.')
            this.isLoadMore = true;
            if (result) {
                if (data.data.length !== 0) {
                    this.goods_list = page == 1 ? data.data || [] : this.goods_list.concat(data.data);
                    this.page = data.current_page;
                    this.total_page = data.last_page;
                }
            } else {
                this.$toast(msg);
            }
        },
        getComment() {
            $http.post('plugin.local-life.api.store.comment-list', { store_id: this.$route.params.store_id * 1 }, '').then(res => {
                if (res.result) {
                    this.comment_list = (res.data.data && res.data.data.splice(0, 2)) || [];
                }
            })
        },
        async getDetail() {
            let json = { id: this.$route.params.store_id * 1, longitude: this.point.lng, latitude: this.point.lat };
            let { result, msg, data } = await $http.post("plugin.local-life.api.store.info", json, '')
            if (result) {
                this.info = data || {};
                let photo_list = []
                if (data.has_one_brand?.brand_pic_tag_list.length !== 0) {
                    data.has_one_brand?.brand_pic_tag_list.forEach(item => {
                        if (item.pics.lenth !== 0) {
                            item.pics.forEach(c_item => {
                                if (c_item.is_recommend) {
                                    photo_list.push(c_item.image_url);
                                }
                            })
                        }
                    })
                }

                if (data.has_one_brand?.brand_pic_list.length !== 0) {
                    data.has_one_brand?.brand_pic_list.forEach(item => {
                        if (item.is_recommend) {
                            photo_list.push(item.image_url);
                        }
                    })
                }
                this.photo_list = photo_list;
                this.total_pics = data.pic_count;
            } else {
                this.$toast(msg);
            }
        },
        getGoods() {
            $http.post('plugin.local-life.api.store.relate-goods', { id: this.$route.params.store_id * 1 }, '').then(res => {
                if (res.result) {
                    let data = res.data;
                    this.list = data.data;
                }
            })
        },
        goto(type = '') {
            if (type == 'all') {
                this.$router.push(this.fun.getUrl('local_life_duscounts', { store_id: this.$route.params.store_id }));
            } else if (type == 'home') {
                this.$router.push(this.fun.getUrl('local_life'))
            } else if (type == 'order') {
                this.$router.push(this.fun.getUrl('orderlist', { status: '0', orderType: 'local-life' }))
            } else if (type == 'detail') {
                this.$router.push(this.fun.getUrl('local_life_store_details', { store_id: this.$route.params.store_id }))
            } else if (type == 'comment') {
                this.$router.push(this.fun.getUrl("local_life_comment", { store_id: this.$route.params.store_id }))
            } else if (type == 'photo-album') {
                this.$router.push(this.fun.getUrl("local_life_photo_album", { store_id: this.$route.params.store_id }))
            } else {
                this.$router.push(this.fun.getUrl("local_life_publish_comment", { store_id: this.$route.params.store_id }))

            }
        },
        callStore() {
            window.location.href = "tel://" + this.info.tel;
        },
        navigation() {
            let point = this.fun.bd_decrypt(this.info.longitude, this.info.latitude);
            this.fun.goToWXAdress(point, this.info.name);
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) {
                return;
            }
            let page = this.page + 1;
            this.get_like_goods(page);

        },
    },
    components: { store_goods },
};
</script>

<style scoped lang='scss'>
.local-life-store ::v-deep .store-goods .goods {
    margin: 0;
    padding: 0.625rem 0;
}

.pc-style {
    position: fixed !important;
    width: 375px;
    bottom: 0;
    left: 50% !important;
    transform: translateX(-50%);
}

.local-life-store {
    padding-bottom: 7rem;

    .icon-tupian {
        margin-right: .2188rem;
        line-height: 1;
        font-size: .875rem;
        color: #FFFFFF;
        font-weight: 500;
    }

    .like-store {

        display: flex;

        margin-bottom: .9375rem;

        .store-distance {
            font-weight: 400;
            font-size: .75rem;
            color: #999999;
            text-align: right;
            line-height: 1;
            margin-top: .3438rem;
        }

        .like-goods-name {
            font-weight: 400;
            font-size: .75rem;
            color: #00001C;
            text-align: left;
            overflow: hidden;
            text-wrap: nowrap;
            text-overflow: ellipsis;
        }

        .like-price {
            font-weight: bold;
            font-size: .875rem;
            color: #F15353;
            margin-right: .375rem;

        }

        .like-store-bottom {
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .discounts {
            font-weight: 500;
            font-size: .6875rem;
            color: #F15353;
            background: #FDE3E3;
            border-radius: .25rem .25rem .25rem .25rem;
            padding: .2188rem;
            margin-right: .3125rem;
        }

        .like-store-name {
            font-weight: 500;
            font-size: .9375rem;
            color: #00001C;
            text-align: left;
        }

        img {
            margin: 0;
            width: 5rem;
            max-height: 5rem;
            border-radius: .625rem;
        }

        .like-store-right {
            flex: 1;
            margin-left: .5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }
    }

    .group-purchase-user {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .icon-icon_more11 {
        color: #6E6E79;
        margin-left: .1563rem;
        font-size: .625rem;
    }

    .view-all {
        margin-top: .875rem;
        font-weight: 400;
        font-size: .75rem;
        color: #00001C;
        text-align: center;
    }

    .icon-dizhi1 {
        color: #999999;
        margin-right: .1875rem;
    }

    .content-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .625rem;

        img {
            width: 2.25rem;
            height: 2.25rem;
            margin: 0 .2813rem 0 0;
            border-radius: 100%;
        }

        .nick-name {
            text-align: left;
            font-weight: bold;
            font-size: 0.875rem;
            color: #00001C;
            line-height: 1;
            margin-bottom: .1875rem;
        }
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .content:last-child {
        margin-bottom: 0;
    }

    .content {
        margin-bottom: 1.5625rem;
        background-color: #fff;

        border-radius: 0.625rem;

        .current {
            color: var(--themeBaseColor) !important;
        }

        .icon-fontclass-pingfen {
            font-size: 0.6875rem;
            color: #D6D6DC;
            margin-right: .0938rem;
        }



        .time {
            font-weight: 400;
            font-size: 0.75rem;
            color: #8E8E95;
        }

        .pic {
            display: flex;
            align-items: center;
            flex-wrap: wrap;


        }

        .pic img {
            width: 5.75rem;
            height: 5.75rem;
            margin: 0 .5rem .5rem 0 !important;
            border-radius: .25rem !important;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .content-txt {
            font-weight: 400;
            font-size: 0.8125rem;
            color: #00001C;
            line-height: 1.125rem;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-bottom: .4063rem;
        }
    }


    .group-purchase {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: .75rem .625rem 1.3125rem;
        margin: .9375rem .75rem .625rem;
        box-sizing: border-box;

        &-title {
            font-weight: bold;
            font-size: 1rem;
            color: #00001C;
            text-align: left;
            margin-bottom: 1rem;
        }
    }

    .main-address-wrapper {
        margin-top: .7813rem;
        display: flex;
        justify-content: space-between;

        .main-address-left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

        }
    }

    .main-distance {
        display: flex;
        align-items: baseline;
        line-height: 1;
        margin-top: .5313rem;
    }

    .main-distance-tips {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
    }

    .main-address {
        font-weight: 500;
        font-size: .8125rem;
        text-align: left;
        color: #00001C;
    }

    .main-address-right-icon {
        display: flex;
        flex-direction: column;
        text-wrap: nowrap;
    }

    .icon-zx_map_local,
    .icon-zx_map_tel {
        width: 1.4375rem;
        height: 1.4375rem;
        font-size: .75rem;
        line-height: 1.4375rem;
        margin-bottom: .375rem;
        background: #EAEDF3;
        border-radius: .5625rem .5625rem .5625rem .5625rem;
    }

    .main-address-right {
        display: flex;
        align-items: center;
        margin-left: 1.1563rem
    }

    .head-item {
        position: relative;
    }

    .main {
        padding: 0 .75rem;
    }

    .main-per-capita {
        font-weight: 400;
        font-size: .75rem;
        color: #00001C;
        text-align: left;
        line-height: 1;
        margin-bottom: .8125rem;
    }

    .main-time-left {
        font-weight: 500;
        font-size: .8125rem;
        color: #00001C;
    }

    .main-time-right {
        font-weight: 400;
        font-size: .75rem;
        flex-shrink: 0;
        color: #999999;
    }

    .main-time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .8125rem 0;
        border-top: 1px solid #E8E8E8;
        border-bottom: 1px solid #E8E8E8;
    }

    .main-name {
        font-weight: bold;
        font-size: 1.25rem;
        color: #00001C;
        line-height: 1;
        text-align: left;
        margin-bottom: .625rem;
    }


    .right {
        right: 1rem !important;
        left: unset !important;
    }

    .img-count {
        position: absolute;
        top: 5.875rem;
        z-index: 10;
        right: 1rem;
        display: inline-block;
        min-width: 3rem;
        height: 1.125rem;
        background: #000000;
        border-radius: .9375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: .6875rem;
        color: #FFFFFF;
    }

    .pt .img-count {
        top: 1.875rem !important;
    }

    .pt {
        padding-top: 3.4375rem !important;
    }

    .head {
        display: flex;
        padding: .3125rem 0 .9375rem .75rem;
        overflow-x: scroll;

        position: relative;

        img {
            flex-shrink: 0;
            margin: 0;
            margin-right: .4063rem;
            width: 12.5rem;
            height: 7.5rem;
            border-radius: .5rem
        }
    }

    .footer-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-order-icon {
        margin-left: 1.5625rem;

    }

    .icon-icon_dingdan_11,
    .icon-shouye {
        font-size: 1.3rem;
        line-height: 1;
        margin-bottom: .3438rem;
    }

    .footer-tips {
        font-size: .625rem;
        color: #00001C;
        line-height: 1;
    }

    .footer-btn {
        width: 7.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        border-radius: 1.2813rem;
        border: 1px solid var(--themeBaseColor);
        font-weight: 500;
        font-size: .875rem;
        color: var(--themeBaseColor);
    }

    .evaluate {
        margin-left: 1.875rem;
    }

    .all {
        margin-right: .75rem;
        margin-left: .625rem;
    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.5rem;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: right;
    }
}
</style>